<template>
  <div class="app-container">
    <div class="pay-container">
      <img :src="icPayLoading" style="width: 160px;height: 100px;"></img>
      <div style=" margin-top: 10px;" v-if="!status">支付中...</div>
      <div style=" margin-top: 10px;" v-if="status==='10'">支付成功</div>
      <div v-else style=" margin-top: 10px;">支付失败</div>
    </div>
  </div>
</template>

<script setup>
import icPayLoading from "@/assets/images/ic_pay_loading.png";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import {getOrderPayStatus} from "@/api//customer_handle/index.js"

const route = useRoute();
let timer = null
const status = ref('')


function fetchData(){
  getOrderPayStatus(route.query.orderId).then(res=>{
    if(res&& res.data){
      status = res.data.payResult
      if(status==='10'){
        clearInterval(timer)
      }
    }
  })
}
onMounted(()=>{
  fetchData()
  timer = setInterval(fetchData, 5000) // 每5秒请求一次
})

onUnmounted(() => {
  clearInterval(timer) // 离开页面清除
})

</script>

<style lang="scss" scoped>
.pay-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
 
}

</style>
